<!DOCTYPE html>
<html lang="zh" style="overflow-y:hidden;">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <script src="./vue.js"></script>
    <script src="./jquery.min.js"></script>

    <style>
        body, html {
            overflow: hidden;
            background: #101010;
            font-weight: 100;
            font-style: normal;
        }
        #app, body, html {
            width: 100%;
            height: 100%;
        }
        .leftBox {
            margin-right: 30px;
        }
        .leftBox, .rightBox {
            width: 35%;
        }
        .innerBox {
            padding: 0rem;
            box-sizing: border-box;
            background: rgba(0, 0, 0, 0.18);
            border: 2px solid rgba(87, 226, 242, 0.2);
            box-shadow: rgb(105 207 255 / 20%) 0px 2px 5px;
            position: relative;
            /*width: 668px;*/
            height: 495px;
            margin: 5px 0 0 5px;
        }
        .title {
            height: 57px;
            line-height: 55px;
            font-size: 21px;
            color: #fff;
            text-align: center;
            border-bottom: 2px solid #27848f;
            background: linear-gradient(180deg,#104054,#124762 55.72%,#134763);
        }
        .header {
            display: flex;
            background-color: rgb(39, 132, 143);
            flex-direction: row;
            font-size: 15px;
            padding: 5px 10px;
        }
        .border-sty {
            width: 142px;
            height: 150px;
            position: absolute;
        }
        .border-one {
            border-top: 2px solid rgb(1 232 238);
            border-left: 2px solid rgb(1 232 238);
            top: -5px;
            left: -4px;
        }
        .border-two {
            border-top: 2px solid rgb(1 232 238);
            border-right: 2px solid rgb(1 232 238);
            top: -5px;
            right: -4px;
        }
        .border-three {
            border-bottom: 2px solid rgb(1 232 238);
            border-left: 2px solid rgb(1 232 238);
            bottom: -5px;
            left: -4px;
        }
        .border-four {
            border-bottom: 2px solid rgb(1 232 238);
            border-right: 2px solid rgb(1 232 238);
            bottom: -5px;
            right: -4px;
        }
        .twenWidthClass {
            width: 20%;
        }
        .eightTyWidthClass {
            width: 80%;
        }
        .rows {
            overflow: hidden;
            height: 354px;
        }
        .rows-item,
        .rows-item-two {
            display: flex;
            padding: 5px 10px;
        }
        .rows-item:nth-child(odd) {
            background-color: rgb(0, 59, 81);
        }
        .rows-item:nth-child(even) {
            background-color: rgb(10, 39, 40);
        }

        .borderIcon {
            display:table;
            border-radius:50%;
            width:10px;
            height:10px;
            background:#00f9ff;
            margin-right:25px
        }
    </style>
</head>

<body style=" background:transparent; height: 100% ;  ">
<div id="app" style="display: flex">
    <div class="leftBox">
        <div class="innerBox">
            <div class="border-sty border-one"></div>
            <div class="border-sty border-two"></div>
            <div class="border-sty border-three"></div>
            <div class="border-sty border-four"></div>
            <div class="title">
                最新入驻企业
            </div>
            <div class="contentBox" style="calc(100% - 57px);padding: 20px; color: #fff">
                <div class="header">
                    <div class="twenWidthClass">类型</div>
                    <div class="eightTyWidthClass">名称</div>
                </div>
                <div class="rows" ref="contentOneRef" id="contentOneRef">
                    <div class="rows-item" v-for="(item, index) in gongchangDataList" :key="index">
                        <div class="twenWidthClass">{{ item.type }}</div>
                        <div class="eightTyWidthClass">{{ item.name }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="rightBox">
        <div class="innerBox">
            <div class="border-sty border-one"></div>
            <div class="border-sty border-two"></div>
            <div class="border-sty border-three"></div>
            <div class="border-sty border-four"></div>
            <div class="title">
                行业动态
            </div>
            <div class="contentBox" style="calc(100% - 57px);padding: 20px; color: #fff">
                <div class="rows" ref="contentTwoRef" id="contentTwoRef" @mouseover="twoMouseEnter" @mouseleave="twoMouseLeave">
                    <div class="rows-item-two" v-for="(item, index) in gongchangDataList" :key="index">
                        <div class="twenWidthClass borderIcon"></div>
                        <div class="eightTyWidthClass">{{ item.name }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    main = new Vue({
        el: '#app',
        data: {
            twoInterver: null,
            gongchangDataList: [
                { type: '工厂', name: '常州市海鹤车辆配件有限公司' },
                { type: '工厂', name: '常州市海鹤车辆配件有限公司' },
                { type: '经销商', name: '常州鑫拓汽车配件厂' },
                { type: '工厂', name: '常州市海鹤车辆配件有限公司' },
                { type: '经销商', name: '常州市海鹤车辆配件有限公司' },
                { type: '工厂', name: '常州市海鹤车辆配件有限公司' },
                { type: '经销商', name: '常州宝广商贸有限公司' },
                { type: '工厂', name: '常州市海鹤车辆配件有限公司' },
                { type: '经销商', name: '常州市海鹤车辆配件有限公司' },
                { type: '工厂', name: '常州市海鹤车辆配件有限公司' },
                { type: '经销商', name: '常州市海鹤车辆配件有限公司' },
                { type: '工厂', name: '常州市武进宏顺机械有限公司' },
                { type: '工厂', name: '常州市武进宏顺机械有限公司' },
                { type: '经销商', name: '常州市海鹤车辆配件有限公司' },
                { type: '工厂', name: '常州市海鹤车辆配件有限公司' },
                { type: '经销商', name: '常州市海鹤车辆配件有限公司' },
                { type: '工厂', name: '常州市武进宏顺机械有限公司' },
                { type: '工厂', name: '常州市武进宏顺机械有限公司' },
            ],
            hangyeDataList: [
                { name: '万向钱潮:公司生产的汽车零部件产品为通用产品 既适用于传统汽车...' },
                { name: '万向钱潮:公司生产的汽车零部件产品为通用产品 既适用于传统汽车...' },
                {  name: '万向钱潮:公司生产的汽车零部件产品为通用产品 既适用于传统汽车...' },
                { name: '万向钱潮:公司生产的汽车零部件产品为通用产品 既适用于传统汽车...' },
                {  name: '万向钱潮:公司生产的汽车零部件产品为通用产品 既适用于传统汽车...' },
                { name: '万向钱潮:公司生产的汽车零部件产品为通用产品 既适用于传统汽车...' },
                {  name: '万向钱潮:公司生产的汽车零部件产品为通用产品 既适用于传统汽车...' },
                { name: '万向钱潮:公司生产的汽车零部件产品为通用产品 既适用于传统汽车...' },
                {  name: '万向钱潮:公司生产的汽车零部件产品为通用产品 既适用于传统汽车...' },
                { name: '万向钱潮:公司生产的汽车零部件产品为通用产品 既适用于传统汽车...' },
                {  name: '万向钱潮:公司生产的汽车零部件产品为通用产品 既适用于传统汽车...' },
                { name: '万向钱潮:公司生产的汽车零部件产品为通用产品 既适用于传统汽车...' },
                { name: '万向钱潮:公司生产的汽车零部件产品为通用产品 既适用于传统汽车...' },
                {  name: '万向钱潮:公司生产的汽车零部件产品为通用产品 既适用于传统汽车...' },
                { name: '万向钱潮:公司生产的汽车零部件产品为通用产品 既适用于传统汽车...' },
                {  name: '万向钱潮:公司生产的汽车零部件产品为通用产品 既适用于传统汽车...' },
                { name: '万向钱潮:公司生产的汽车零部件产品为通用产品 既适用于传统汽车...' },
                { name: '万向钱潮:公司生产的汽车零部件产品为通用产品 既适用于传统汽车...' },
            ]
        },
        filters: {},
        methods: {
            twoMouseLeave () {
                const contentTwoRef = this.$refs.contentTwoRef;
                this.twoInterver = setInterval(() => {
                    contentTwoRef.scrollTop += 1;
                    if (
                        contentOneRef.clientHeight + contentOneRef.scrollTop >=
                        contentOneRef.scrollHeight
                    ) {
                        $("#contentTwoRef").animate({ scrollTop: 0 }, 40);
                    }
                }, 30);
            },
            twoMouseEnter () {
              clearInterval(this.twoInterver)
            },
            scrollMessage () {
                const contentOneRef = this.$refs.contentOneRef;
                setInterval(() => {
                    let sum = 0
                    sum += 31
                    // contentOneRef.scrollTop += 100;
                    $("#contentOneRef").animate({ scrollTop: contentOneRef.scrollTop + sum }, 100);
                    if (
                        contentOneRef.clientHeight + contentOneRef.scrollTop >=
                        contentOneRef.scrollHeight
                    ) {
                        $("#contentOneRef").animate({ scrollTop: 0 }, 40);
                    }
                }, 5000);

                const contentTwoRef = this.$refs.contentTwoRef;
                this.twoInterver = setInterval(() => {
                    contentTwoRef.scrollTop += 1;
                    if (
                        contentTwoRef.clientHeight + contentTwoRef.scrollTop >=
                        contentTwoRef.scrollHeight
                    ) {
                        $("#contentTwoRef").animate({ scrollTop: 0 }, 40);
                    }
                }, 30);
            }
        },
        mounted() {
            this.scrollMessage()
        },
    })
</script>
</body>

</html>
